<template>
  <div class="hot-topics">
    <el-scrollbar height="calc(100% - 20px)">
      <div class="topic-list">
        <div
          v-for="(topic, index) in hotTopics"
          :key="topic.id"
          class="topic-item"
          :class="{ 'is-trending': index < 3 }"
        >
          <div class="topic-rank">{{ index + 1 }}</div>
          <div class="topic-content">
            <div class="topic-title">{{ topic.title }}</div>
            <div class="topic-meta">
              <span class="topic-views">{{ formatNumber(topic.views) }} 浏览</span>
              <span class="topic-comments">{{ formatNumber(topic.comments) }} 评论</span>
              <el-tag v-if="topic.tag" size="small" :type="getTagType(topic.tag)">
                {{ topic.tag }}
              </el-tag>
            </div>
          </div>
          <div class="topic-trend">
            <div class="trend-indicator" :class="getTrendClass(topic.trend)">
              <el-icon><component :is="getTrendIcon(topic.trend)" /></el-icon>
              <span>{{ formatTrend(topic.trend) }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
/**
 * 热门话题组件
 *
 * 展示当前站点上热门的话题和其相关数据，包括浏览量、评论数和增长趋势
 */
import { ref } from 'vue'
import { ArrowUp, ArrowDown, Right } from '@element-plus/icons-vue'

/**
 * 热门话题数据（模拟数据）
 */
const hotTopics = ref([
  {
    id: 1,
    title: 'Vue3 新特性深度解析及最佳实践',
    views: 12450,
    comments: 342,
    trend: 85.2,
    tag: '技术',
  },
  {
    id: 2,
    title: '2024年前端开发趋势预测',
    views: 9876,
    comments: 256,
    trend: 62.8,
    tag: '趋势',
  },
  {
    id: 3,
    title: 'TypeScript 高级类型体操详解',
    views: 8540,
    comments: 198,
    trend: 45.3,
    tag: '教程',
  },
  {
    id: 4,
    title: '如何优化前端应用性能',
    views: 7230,
    comments: 165,
    trend: 25.7,
    tag: '优化',
  },
  {
    id: 5,
    title: 'CSS Grid 实战：构建复杂布局',
    views: 6120,
    comments: 142,
    trend: 18.4,
    tag: '教程',
  },
  {
    id: 6,
    title: 'Web3 开发入门指南',
    views: 5670,
    comments: 112,
    trend: 15.2,
    tag: '新技术',
  },
  {
    id: 7,
    title: 'React vs Vue：2024年选择指南',
    views: 4890,
    comments: 324,
    trend: 10.5,
    tag: '讨论',
  },
  {
    id: 8,
    title: '移动优先设计的实践经验',
    views: 3950,
    comments: 87,
    trend: 5.2,
    tag: '设计',
  },
  {
    id: 9,
    title: 'JavaScript 异步编程最佳实践',
    views: 3680,
    comments: 76,
    trend: 3.8,
    tag: '教程',
  },
  {
    id: 10,
    title: '从零开始构建微服务架构',
    views: 3240,
    comments: 65,
    trend: -2.6,
    tag: '架构',
  },
])

/**
 * 格式化数字
 * 将大于1000的数字转为k形式
 */
const formatNumber = (num) => {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num
}

/**
 * 格式化趋势
 * 添加百分号
 */
const formatTrend = (trend) => {
  return trend > 0 ? `+${trend}%` : `${trend}%`
}

/**
 * 获取趋势图标
 * 根据趋势值选择对应的图标
 */
const getTrendIcon = (trend) => {
  if (trend > 10) return 'ArrowUp'
  if (trend < 0) return 'ArrowDown'
  return 'Right'
}

/**
 * 获取趋势样式类
 * 根据趋势值选择对应的样式
 */
const getTrendClass = (trend) => {
  if (trend > 10) return 'trend-up'
  if (trend < 0) return 'trend-down'
  return 'trend-stable'
}

/**
 * 获取标签类型
 * 根据标签内容选择对应的Element Plus标签类型
 */
const getTagType = (tag) => {
  const typeMap = {
    技术: 'primary',
    教程: 'success',
    趋势: 'warning',
    讨论: 'info',
    新技术: 'danger',
    优化: 'primary',
    设计: 'success',
    架构: 'warning',
  }
  return typeMap[tag] || ''
}
</script>

<style lang="scss" scoped>
.hot-topics {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .topic-list {
    padding: 0;
  }

  :deep(.el-scrollbar__wrap) {
    overflow-x: hidden;
  }

  .topic-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-bottom: 8px;
    background: var(--el-fill-color-light);

    @media (max-width: 768px) {
      padding: 12px;
      margin-bottom: 6px;
    }

    &:last-child {
      margin-bottom: 0;
    }

    &:hover {
      transform: translateY(-2px);
      background: var(--el-fill-color);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

      @media (max-width: 768px) {
        transform: none;
      }
    }

    // 热门话题样式
    &.is-trending {
      .topic-rank {
        color: white;
        font-weight: 600;
      }

      &:nth-child(1) .topic-rank {
        background: var(--el-color-danger);
      }

      &:nth-child(2) .topic-rank {
        background: var(--el-color-warning);
      }

      &:nth-child(3) .topic-rank {
        background: var(--el-color-primary);
      }
    }
  }

  .topic-rank {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--el-fill-color);
    color: var(--el-text-color-regular);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-right: 16px;
    flex-shrink: 0;

    @media (max-width: 768px) {
      width: 24px;
      height: 24px;
      font-size: 13px;
      margin-right: 12px;
    }
  }

  .topic-content {
    flex: 1;
    min-width: 0;
  }

  .topic-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--el-text-color-primary);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    @media (max-width: 768px) {
      font-size: 13px;
      margin-bottom: 4px;
    }
  }

  .topic-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--el-text-color-secondary);

    @media (max-width: 768px) {
      gap: 8px;
      font-size: 12px;
    }

    .el-tag {
      margin-left: 8px;
      border-radius: 4px;

      @media (max-width: 768px) {
        display: none;
      }
    }
  }

  .topic-trend {
    margin-left: 20px;

    @media (max-width: 768px) {
      margin-left: 8px;
    }

    .trend-indicator {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 500;
      padding: 4px 8px;
      border-radius: 6px;

      @media (max-width: 768px) {
        font-size: 12px;
        padding: 2px 6px;

        .el-icon {
          display: none;
        }
      }

      &.trend-up {
        color: var(--el-color-success);
        background: var(--el-color-success-light-9);
      }

      &.trend-down {
        color: var(--el-color-danger);
        background: var(--el-color-danger-light-9);
      }

      &.trend-stable {
        color: var(--el-color-info);
        background: var(--el-color-info-light-9);
      }

      .el-icon {
        font-size: 14px;
      }
    }
  }
}
</style>
